<template>
	<view class="video">
		<NavbarRight leftIconColor="#333333" bgColor="transparent" isBack :left="{imageUrl:leftImageUrl,width:'48rpx'}"
			text="切换录音" :image="audioIcon"  @click="rightClick"/>
		<view class="background">

		</view>
		<view class="content">
			<view class="video-content">
				<!-- <view class="cover-view">
					<image :src="info.cover" mode="aspectFill" class="audio-cover" v-if="info.cover"></image>
				</view> -->
				<VideoView :src="info.video" width="702" height="396" border-radius="16" v-if="info.video" />
			</view>
			<view class="head">
				<view class="hot-info">
					<view class="hot-title ellipsis-3">
						{{info.title}}
					</view>
					<view class="author">
						<!-- <text>作者：</text> -->
						<text>{{info.subtitle}}</text>
					</view>
				</view>
			</view>
			<view class="article-body">
				<rich-text :nodes="info.content"></rich-text>
			</view>
			<view class="audio-player">
			</view>
		</view>
		<SubmitButton text="朗诵视频跟练" :leftIcon="leftIcon" @handleClick="handleClick"></SubmitButton>
	</view>
</template>

<script setup>
	import NavbarRight from "@/components/navbar-right/index.vue"
	import SubmitButton from "@/components/submit-button/index.vue"
	import VideoView from '@/components/video-view';
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		reactive,
		ref
	} from "vue";
	import {
		getArticleInfo,
	} from "@/api/article";
	const leftImageUrl = ref("/static/images/login/loginfanhui@3x.png")
	const audioIcon = ref("/static/images/article/luyin-2@3x.png")
	const leftIcon = ref("/static/images/article/video@3x.png")
	const id = ref('')
	const info = ref({})
	onLoad((options) => {
		console.log("video:onLoad");
		if (options && options.id) {
			id.value = options.id
			getDetail()
		}
	})
	onUnload(()=>{
		console.log("video:onUnload");
	})
	const getDetail = async () => {
		try {
			let res = await getArticleInfo({
				id: id.value
			})
			info.value = res.data
			console.log(info.value)
		} catch (e) {
			console.log(e);
			//TODO handle the exception
		}
	}
	const handleClick=()=>{
		uni.$u.route({
			url: "/pages/article/camera/camera",
			params: {
				id: info.value.id
			}
		})
	}
	const rightClick=()=>{
		toDetailPage()
	}
	const toPage=()=>{
		let pages = getCurrentPages();
		let index = 0;
		for (let item of pages) {
			if (item.route.indexOf('pages/article/audio/audio') != -1) {
				uni.navigateBack({
					delta: pages.length - index - 1
				});
				return;
			}
			index++;
		}
		toDetailPage();
	}
	const toDetailPage=()=>{
		// uni.$u.route({
		// 	// type:"redirectTo",
		// 	url: `/pages/article/audio/audio?id=${id.value}`,
		// 	params:{
		// 		id:id.value
		// 	}
		// })
		// uni.navigateTo({
		// 	url: `/pages/article/audio/audio?id=${id.value}`
		// })
		uni.redirectTo({
			url: `/pages/article/audio/audio?id=${id.value}`
		})
	}
</script>

<style lang="scss" scoped>
	.video {
		position: relative;
		height: 100vh;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;

		.background {
			width: 100%;
			height: 780rpx;
			top: 0;
			left: 0;
			position: absolute;
			background: linear-gradient(180deg, #90e4ed 0%, #FFFFFF 100%);
		}

		.content {
			height: 100%;
			overflow: auto;
			position: relative;
			z-index: 10;
			padding: 48rpx 32rpx;
			padding-bottom: 128rpx;

			.head {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-bottom: 80rpx;

				.records {
					position: relative;

					.cover-view {
						width: 100%;
						height: 686rpx;
						border-radius: 30rpx;
						position: relative;
						overflow: hidden;
					
					}
				}



				.hot-info {

					display: flex;
					flex-direction: column;
					justify-content: center;
					text-align: center;
					padding-top: 20rpx;

					.hot-title {
						font-size: 44rpx;
						font-weight: bold;
						color: #1A1A1A;
						line-height: 58rpx;
					}

					.author {
						font-size: 28rpx;
						color: #939999;
						line-height: 28rpx;
						margin-top: 20rpx;
					}
				}

				
			}
			.article-body {
				font-size: 28rpx;
				line-height: 44rpx;
				color: #939999;
				// height: 176rpx;
				// overflow-y: auto;
			}
			.audio-player{
				padding: 60rpx 0;
			}
		}
	}
</style>